<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        var page;
        var pageNum;
        function fenye(pageIndex) {
            $.ajax({
                url:"LiuYanServlet",
                type:"POST",
                data:{pageIndex:pageIndex},
                dataType:"json",
                success:function (data) {
                    var str="";
                    //获取当前页和总页数
                    page=data.pageIndex;
                    pageNum=data.pageNum;
                    //遍历jsonArray
                    $.each(data.jsonArray,function (i,n) {
                        str="<tr class='add'>"+
                            "<td>"+
                            n.liuId
                            +"</td>>"

                            + "<td>"+
                            n.title
                            +"</td>>"

                            + "<td>"+
                            n.createDate
                            +"</td>>"
                            +"</tr>"
                        $("#aa").before(str);
                    });
                    //显示当前页和总页数
                    $("#pageIndex").html(page);
                    $("#pageNum").html(pageNum);
                }
            })
        }

        $(function () {
            //页面加载
            fenye("");

            //点击事件
            $("#head").click(function () {
                $("tr").remove(".add");
                page="1";
                fenye(page);

            });

            $("#wei").click(function () {
                $("tr").remove(".add");

                fenye(pageNum);
            });

            $("#up").click(function () {
                $("tr").remove(".add");
                fenye(page-1);
            });

            $("#down").click(function () {
                $("tr").remove(".add");
                fenye(page+1);
            });
        })


    </script>
</head>
<body>
<table id="tab">
    <th>编号</th>
    <th>标题</th>
    <th>时间</th>
    <tr id="aa">
        <td colspan="3">
            第<span id="pageIndex"></span>页 | 共<span id="pageNum"></span>页
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input id="head" type="button" value="首页">
            <input id="up" type="button" value="上一页">
            <input id="down" type="button" value="下一页">
            <input id="wei" type="button" value="尾页">
        </td>
    </tr>
</table>
</body>
</html>